<template>
	<view class="content">
		<view class="header">
			<view class="header-logo">
				<image src="../../static/index/heade-logo-tuya.png" mode=""></image>
			</view>
		</view>
		<view class="main-tab">
			<!-- 个人信息 -->
			<view class="main-user" @click="settingUser()">
				<!-- <image :src="store.userInfo.picture"></image> -->
				<view class="user-info">
					<view class="user-name">
						<text>{{store.userInfo.phone}}</text>
						<image style="margin-left: 20rpx" src="../../static/my/setting.png" mode=""></image>
					</view>
				</view>
			</view>
			
			<!-- tab -->
			<view class="main-wrap">
				<view class="tab-item" v-for="(item, index) in data.tabData" :key="index" @click="toPage(item)">
					<view class="title">{{item.name}}</view>
					<view class="title">{{item.num}}</view>
				</view>
			</view>
			
			<!-- 订单 -->
			<view class="main-wrap" style="borderRadius: 16rpx">
				<view class="tab-item" v-for="(item, index) in data.orderData" :key="index" @click="toOrder(item)">
					<view class="title">{{item.name}}</view>
					<image :src="item.url"></image>
				</view>
			</view>
			
			<!-- 菜单 -->
			<view class="main-wrap-column" style="borderRadius: 16rpx">
				<view class="main-menu-item" v-for="(item, index) in data.menuData" :key="index" @click="toPage(item)">
					<view class="main-menu-item" v-if="item.name == '客服'">
						<button type="default" open-type="contact">在线客服</button>
						<image src="../../../static/my/详情@2x.png" mode=""></image>
					</view>
					<view class="main-menu-item" v-else>
						<view class="title">{{item.name}}</view>
						<view class="title">{{item.name == '钱包'? '0元':''}}</view>
						<image v-if="item.name !== '钱包'" src="../../../static/my/详情@2x.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<TabBar :current="3"></TabBar>
	</view>
</template>

<script setup>
import TabBar from '@/components/TabBar.vue';
import loginUserVue from '../../components/loginUser/loginUser.vue';
import { reactive, ref } from 'vue';
import { onShow } from "@dcloudio/uni-app";
import { myInfo, infoMore } from '@/request/api/my.js';
import { useCartStore } from '@/store/cart.js';
import { miniPhone } from '@/request/api/vip.js';
	
const store = useCartStore();

const popup = ref(true);
const data = reactive({
	myInfo: {},
	ApiToken: '',
	myInfoTwo: {},
	tabData: [
		{ name: '门票', num: 0, url: '/pages/my/order?index=5' },
		// { name: '体验中', num: 0, url: '/pages/my/experiencing' },
		{ name: '收藏', num: 0, url: '/pages/my/collect' },
		{ name: '优惠券', num: 0, url: '/pages/my/coupon' }
	],
	orderData: [
		{ name: '待付款', img: '../../static/logo.png', url: '../../static/my/待付款@2x.png', index: 1, model: 0, status: 0 },
		{ name: '待发货', img: '../../static/logo.png', url: '../../static/my/待发货@2x.png', index: 2 },
		{ name: '待收货', img: '../../static/logo.png', url: '../../static/my/待收货@2x.png', index: 3 },
		{ name: '售后', img: '../../static/logo.png', url: '../../static/my/售后@2x.png', index: 4 },
		{ name: '全部订单', img: '../../static/logo.png', url: '../../static/my/全部订单@2x.png', index: 5 }
	],
	
	menuData: [
		// { name: '会员卡包', url: '/pages/my/card' },
		// { name: '我的积分', url: '/pages/my/point' },
		{ name: '收货地址', url: '/pages/my/address' },
		{ name: '在线客服' },
		// { name: '优惠券中心', url: '/pages/my/coupon' },
		// { name: '消息中心', url: '/pages/my/message' },
		// { name: '钱包', url: '/pages/my/purse' }
	]
})

// 用户信息
var userInfo = ref({
	avatar:'',
	nickName:'',
	phone:'',
	popshow: false
})


onShow(()=> {
	getInfo();
	getInfoMore();
	if (!store.token) {
		console.log(userInfo)
		userInfo.value.popshow = true;
	} 
})

// 我的信息
const getInfo = async () => {
	try {
		const resultData = await myInfo();
		data.myInfo = resultData.data;
	} catch (e) { }
}

// 我的信息
const getInfoMore = async () => {
	try {
		const resultData = await infoMore();
		data.myInfoTwo = resultData.data;
		data.tabData[0].num = data.myInfoTwo.ticket;
		data.tabData[1].num = data.myInfoTwo.experience;
		data.tabData[2].num = data.myInfoTwo.collect;
		data.tabData[3].num = data.myInfoTwo.coupon;
	} catch (e) { }
}

// 设置我的信息
const settingUser = () => {
	uni.navigateTo({
		url: `../my/setting/setting?info=${JSON.stringify(data.myInfo)}`
	})
}

const closepop = () => {
	userInfo.value.popshow = false;
}

// 菜单
const toPage = (item) => {
	if (item.name == '客服') {
		return
	} else {
		uni.navigateTo({
			url: item.url
		})
	}
}

// 前往订单 商品
const toOrder = (item) => {
	const query = { index: item.index }
	uni.navigateTo({
		url: `/pages/my/order?index=${JSON.stringify(query)}&type=${item.status}`
	})
}

// // 微信头像获取
// function onChooseAvatar(e) {
// 	const { avatarUrl } = e.detail
// 	userInfo.value.avatar = avatarUrl
// 	console.log(userInfo.value.avatar)
// }

// // 用户昵称
// function blurInput(e){
// 	userInfo.value.nickName = e.detail.value
// }

// // 获取手机号
// function getUserPhone(e){
// 	// 调取接口解密手机号
// 	uni.login({
// 		complete(i) {
// 			const params = {
// 				auth_code: i.code,
// 				code: e.detail.code
// 			}
// 			miniPhone(params).then(res => {
// 				data.myInfo = res.data;
// 				data.ApiToken = res.data.ApiToken;
// 				userInfo.value.phone = res.data.phone;
// 			})
// 		}
// 	})
// }

// // 保存信息--这里登录存储信息
// const savaInfo = () => {
// 	store.setUserInfo({
// 		userInfo: userInfo.value.phone,
// 		picture: userInfo.value.avatar,
// 		nickName: userInfo.value.nickName
// 	});
	
// 	store.setToken(data.ApiToken);
// 	userInfo.value.popshow = false;
	
// 	uni.showToast({
// 		title: '已登陆',
// 		icon: 'none',
// 		duration: 1000,
// 	});
// }

</script>



<style lang="scss">
	page {
		background: #F7F7F7;
	}
	.content {
		position: relative;
		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			.header-logo > image {
				width: 100%;
				height: 330rpx;
			}
			.logo >image {
				width: 226rpx;
				height: 34rpx;
				position: absolute;
				top: 100rpx;
				left: 20rpx;
			}
		}
		.main {
			width: 100%;
			height: auto;
			background: #FFFFFF;
			border-radius: 70rpx 70rpx 0rpx 0rpx;
			position: absolute;
			top: 200rpx;
			padding-top: 30rpx;
		}
		.main-tab {
			width: 100%;
			position: absolute;
			top: 140rpx;
			.main-user {
				display: flex;
				align-items: center;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #F8F4E9;
				line-height: 40rpx;
				padding: 0rpx 30rpx;
				box-sizing: border-box;
				image {
					width: 112rpx;
					height: 112rpx;
					border-radius: 50%;
				}
				.user-info {
					margin-left: 24rpx;
					height: 112rpx;
					display: flex;
					justify-content: space-around;
					flex-direction: column;
					.user-name {
						font-size: 36rpx;
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						image {
							width: 38rpx;
							height: 42rpx;
						}
					}
					.user-leave {
						font-size: 24rpx;
						display: flex;
						align-items: center;
						.line {
							width: 346rpx;
							height: 8rpx;
							background: #DEDEDE;
							border-radius: 4rpx;
							position: relative;
							margin-left: 40rpx;
							.step {
								width: 100rpx;
								height: 8rpx;
								background-color: #FFCF26;
								position: absolute;
								left: 0rpx;
							}
						}
					}
				}
				
			}
			.main-wrap:first-child {
				margin-top: 0rpx;
			}
			.main-wrap {
				width: 712rpx;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 50rpx;
				box-sizing: border-box;
				margin: 0 auto;
				margin-top: 30rpx;
				.title {
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1C1919;
					line-height: 40rpx;
				}
				.tab-item {
					text-align: center;
				}
				.tab-item > image {
					width: 56rpx;
					height: 56rpx;
					margin-top: 12rpx;
				}
			}
			.main-wrap-column {
				width: 712rpx;
				height: auto;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: space-between;
				margin: 0 auto;
				margin-top: 30rpx;
				margin-bottom: 200rpx;
				.main-menu-item:last-child {
					border: none;
				}
				.main-menu-item {
					width: 630rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					border-bottom: 1rpx dashed #E5E4E4;
					image {
						width: 20rpx;
						height: 30rpx;
					}
					.title {
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1C1919;
						line-height: 40rpx;
					}
					::v-deep button {
						width: 100%;
						text-align: left !important;
						margin: 0 !important;
						background-color: transparent !important;
						border: 1rpx solid transparent;
						font-size: 24rpx !important;
						font-weight: 400 !important;
						padding: 0rpx !important;
					}
					::v-deep button::after { 
				        border: none
					}
				}
			}
		}
	}
</style>
